<template>
  <div class="about-me">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>关于我页面信息编辑</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="container">
      <div class="left">
        <el-form label-width="70px" :model="about">
          <!-- <el-form-item label="姓名">
            <el-input v-model="about.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="about.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="about.age"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="about.birthday"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="about.education"></el-input>
          </el-form-item>
          <el-form-item label="学校">
            <el-input v-model="about.school"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="about.major"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="about.mobile"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="about.email"></el-input>
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="about.wechat"></el-input>
          </el-form-item>
          <el-form-item label="GitHub">
            <el-input v-model="about.github"></el-input>
          </el-form-item>
          <el-form-item label="码云">
            <el-input v-model="about.gitee"></el-input>
          </el-form-item>
          <el-form-item label="掘金">
            <el-input v-model="about.juejin"></el-input>
          </el-form-item> -->

          <el-form-item label="标题文字">
            <el-input v-model="about.title"> </el-input>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input
              type="textarea"
              :rows="20"
              placeholder="请输入内容"
              v-model="about.description"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAbout" class="mt10"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form label-width="70px" :model="about">
          <el-form-item>
            <el-upload
              :action="baseURL + '/upload'"
              :show-file-list="false"
              :on-success="afterImgUpoad"
            >
              <img v-if="about.photo" :src="about.photo" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { getData, putData, postData, baseURL } from "../../services/http";
import { onBeforeMount } from "@vue/runtime-core";
export default {
  name: "AboutMe",
  setup() {
    const state = reactive({
      about: {},
    });
    const getAbout = async () => {
      const { data: res } = await getData("rest/about");
      if (res.data.length) {
        state.about = res.data[0];
        return;
      }
    };
    const saveAbout = () => {
      const id = state.about._id;
      if (id) {
        return putData(`rest/about/${id}`, state.about, "修改简历介绍信息成功");
      }
      postData("rest/about", state.about, "保存关于我页面信息成功");
      getAbout();
    };
    const afterImgUpoad = (res) => {
      state.about.photo = res.url;
    };
    onBeforeMount(() => {
      getAbout();
    });
    return {
      ...toRefs(state),
      saveAbout,
      baseURL,
      afterImgUpoad,
    };
  },
};
</script>

<style lang="scss">
.container .el-card__body {
  display: flex;

  .left {
    width: 450px;
  }
  .right {
    .el-form-item__content {
      margin: 0 !important;
    }
    margin: 20px 50px;
    max-width: 300px;
    max-height: 350px;
    flex: 1;
    width: 500px;
    .el-upload {
      display: block;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>